<template>
  <div>
    <el-card class="box-card">
      <div slot="header" style="text-align:left">
        <el-form :inline="true" :model="searchForm" class="demo-form-inline">
          <el-form-item label="劵名称">
            <el-input v-model="searchForm.name" placeholder="名称"></el-input>
          </el-form-item>
          <el-form-item label="赠券方式">
            <el-select v-model="searchForm.grantType" placeholder="赠券方式">
              <el-option label="全部" value></el-option>
              <el-option label="会员赠券" value="Member"></el-option>
              <el-option label="购物赠券" value="Buy"></el-option>
              <el-option label="注册赠券" value="Register"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
          </el-form-item>
           <el-form-item>
            <el-button type="primary" @click="add">添加</el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-table :data="coupons" border style="width: 100%">
        <el-table-column prop="name" label="订单号" style="width: 20%"></el-table-column>
        <el-table-column prop="startTime" label="开始时间" style="width: 50%"></el-table-column>
         <el-table-column prop="endTime" label="结束时间" style="width: 50%"></el-table-column>
        <el-table-column prop="amount" label="总发行量" style="width: 50%"></el-table-column>
        <el-table-column prop="denomination" label="面额" style="width: 50%"></el-table-column>
        <el-table-column prop="limitNum" label="限领" style="width: 50%"></el-table-column>
        <el-table-column prop="reachCash" label="使用门槛(满)" style="width: 50%"></el-table-column>
        <el-table-column prop="grantType" label="赠券方式" style="width: 50%">
          <template slot-scope="scope">
            <span v-if="scope.row.grantType=='Member'">会员赠券</span>
            <span v-else-if="scope.row.orderStatus=='Buy'">购物赠券</span>
            <span v-else-if="scope.row.orderStatus=='Register'">注册赠券</span>
            <span v-else>未知状态</span>
          </template>
        </el-table-column>
        <el-table-column prop="merchantId" label="使用门店" style="width: 50%">
          <template slot-scope="scope">
            <span v-if="scope.row.merchantId">{{scope.row.merchantName}}</span>
            <span v-else>全部</span>
          </template>
        </el-table-column>
        <el-table-column prop="plat" label="使用平台" style="width: 50%">
          <template slot-scope="scope">
            <span v-if="scope.row.plat=='0'">全部</span>
            <span v-else-if="scope.row.plat=='1'">PC端</span>
            <span v-else-if="scope.row.plat=='2'">移动端</span>
            <span v-else>未知状态</span>
          </template>
        </el-table-column>
        <el-table-column  label="状态" style="width: 50%">
          <template slot-scope="scope">
            <span style="color:#FF00FF" v-if="Date.parse(scope.row.startTime)>new Date()">未开始</span>
            <span style="color:red" v-else-if="Date.parse(scope.row.endTime)<new Date()">已失效</span>
            <span style="color:green" v-else>正常</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" style="width: 10%">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="add(scope.row)">编辑</el-button>
            <el-button type="text" size="small" @click="detail(scope.row)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block" style="margin-top:10px;">
        <el-pagination
          background
          @current-change="handleCurrentChange"
          :current-page.sync="pagenow"
          :page-size="pagesize"
          layout="total, prev, pager, next"
          :total="total"
        ></el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import { couponList,orderRefound } from "@/libs/api.js";
export default {
  methods: {
    handleCurrentChange(p) {
      this.loadPage(p);
    },
    onSubmit() {
      this.pagenow = 1;
      this.loadPage();
    },
    loadPage() {
      var param = { pagesize: 10, pagenow: this.pagenow,"name":this.searchForm.name,"grantType":this.searchForm.grantType};
      couponList(param).then(res => {
        this.coupons = res.rows;
        this.total = res.total;
      });
    },
    add(row){
        var id = "";
        if(row  && row.id){
            id=row.id;
        }
        this.$router.push({
          path: "/coupon/add?id="+id,
        });
    }
  },

  mounted() {
    this.loadPage();
  },

  data() {
    return {
      coupons: [],
      total: 0,
      pagenow: 1,
      pagesize: 10,
      searchForm: {
        grantType: "",
        name: ""
      }
    };
  }
};
</script>